<template>
  <div class="maxbox">
    <div class="leftTab">
      <div class="leftTab_title">
        <div class="shu"></div>
        <div class="leftTab_name">我的保险</div>
      </div>
      <div class="left_Tab_list" v-for="(item, index) in tabarr" :key="index">
        <div
          :class="
            activeName == index ? 'left_Tab_item active_item' : 'left_Tab_item'
          "
          @click="itemclick(index, item.type)"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- <div class="listbox">
              <el-tabs v-model="activeName" @tab-click="handleClick" tabPosition="left" type="border-card">
                  <el-tab-pane label="投保成功" name="1"></el-tab-pane>
                  <el-tab-pane label="待支付单" name="2"></el-tab-pane>
                  <el-tab-pane label="待续投保" name="3"></el-tab-pane>
                  <el-tab-pane label="到期保单" name="4"></el-tab-pane>
              </el-tabs>
            </div> -->
    </div>
    <div class="order-body" style="margin: 0" v-loading="loading">
      <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="投保成功" name="1"></el-tab-pane>
              <el-tab-pane label="待支付单" name="2"></el-tab-pane>
              <el-tab-pane label="待续投保" name="3"></el-tab-pane>
              <el-tab-pane label="到期保单" name="4"></el-tab-pane>
            </el-tabs> -->
      <el-form size="mini" :inline="true" style="margin-top: 10px">
        <el-form-item label="保单号">
          <el-input placeholder="请输入保单号" v-model="order_no"></el-input>
        </el-form-item>
        <el-form-item label="被保企业">
          <el-input placeholder="请输入被保企业" v-model="qiye_name"></el-input>
        </el-form-item>
        <el-form-item label="被保人员">
          <el-input
            placeholder="请输入被保人员姓名或者身份证号码"
            v-model="key_words"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="com-btn"
            icon="el-icon-search"
            @click="changePage(1)"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="left_Tab_list" v-for="(item, index) in tabarr" :key="index">
        <el-divider content-position="left" v-if="activeName == index">{{
          item.name
        }}</el-divider>
      </div>
      <!--            <el-table size="mini" :data="list.data" :default-expand-all="true" border>-->
      <!--                <el-table-column label="保单号" prop="bd_no"></el-table-column>-->
      <!--                <el-table-column label="被保人" prop="insure_name"></el-table-column>-->
      <!--                <el-table-column label="方案" prop="fanan_memo"></el-table-column>-->
      <!--                <el-table-column label="录入日期" prop="create_time"></el-table-column>-->
      <!--                <el-table-column label="保险起期" prop="start_time"></el-table-column>-->
      <!--                <el-table-column label="保险止期" prop="end_time"></el-table-column>-->
      <!--                <el-table-column label="保费" prop="total_price">-->
      <!--                </el-table-column>-->
      <!--                <el-table-column label="状态" width="120px">-->
      <!--                    <template slot-scope="item">-->
      <!--                        <div style="text-align: center">-->
      <!--                            <div>-->
      <!--                                <el-link type="success">{{ item.row.tag }}</el-link>-->
      <!--                            </div>-->
      <!--                            <div v-if="item.row.state == 2 && activeindex != 4">（{{ item.row.day }}后到期）</div>-->
      <!--                            <div v-if="item.row.state == 2 && activeindex == 4">（已到期）</div>-->
      <!--                                          <div v-if="item.row.state == 1" @click="getpayState(item.row.id)" class="yzpay-box"><el-button icon="el-icon-refresh" size="mini">刷新状态</el-button></div>-->
      <!--                        </div>-->
      <!--                    </template>-->
      <!--                </el-table-column>-->
      <!--                <el-table-column label="操作" width="100px">-->
      <!--                    &lt;!&ndash;           可以优化 :formatter="stateFormat"&ndash;&gt;-->
      <!--                    <template slot-scope="item">-->
      <!--                        <el-button v-if="activeindex == 3" type="text" class="com-btn-txt" size="mini"-->
      <!--                                   @click="nextBao(item.row.bx_id,item.row.id)">续保-->
      <!--                        </el-button>-->
      <!--                        <el-button v-if="item.row.state == 2" type="text" class="com-btn-txt" size="mini"-->
      <!--                                   @click="see(item.row.id)">查看-->
      <!--                        </el-button>-->
      <!--                        <el-button v-if="item.row.state == 2" type="text" class="com-btn-txt" size="mini"-->
      <!--                                   @click="toChange(item.row.id)">批改-->
      <!--                        </el-button>-->
      <!--                        <el-button v-if="item.row.state == 1" type="text" class="com-btn-txt" size="mini"-->
      <!--                                   @click="pay(item.row.id)">去支付-->
      <!--                        </el-button>-->
      <!--                        <el-button v-if="item.row.state == 1" type="text" class="com-btn-txt" size="mini"-->
      <!--                                   @click="del(item.row.id)">删除-->
      <!--                        </el-button>-->
      <!--                    </template>-->
      <!--                </el-table-column>-->
      <!--            </el-table>-->
      <!--            展示表格-->
      <div class="table_body">
        <div class="table_header">
          <div class="text_head">被保人</div>
          <div class="text_head">保险起止期</div>
          <div class="text_head" style="width: 18%">保费</div>
          <div class="text_head" style="width: 18%">状态</div>
          <div class="text_head" style="width: 18%">操作</div>
        </div>
        <div class="gundong_c">
          <div
            v-for="(item, index) in list.data"
            :key="index"
            class="table_bodyT"
          >
            <div class="table_bodyTHeader">
              <div class="table_bodyTHS">
                <div class="table_bodyTHS_t">
                  产品名称：{{ item.bx_name }} {{ " " }}(保单号：{{
                    item.bd_no
                  }})
                  <div class="copy_text" @click="copyBD(item.bd_no)">复制</div>
                </div>
                <div style="color: #999999">{{ item.create_time }}</div>
              </div>
            </div>
            <div class="table_bodyI">
              <div style="width: 24%; text-align: left">
                {{ item.insure_name }}
              </div>
              <div style="width: 24%; text-align: center">
                <div>{{ item.start_time }}</div>
                <div>{{ item.end_time }}</div>
              </div>
              <div class="table_bodyI_t">{{ item.total_price }}/年</div>
              <div class="table_bodyI_t">
                <div style="text-align: center">
                  <div>
                    <el-link type="success">{{ item.tag }}</el-link>
                  </div>
                  <div v-if="item.state == 2 && activeindex != 4">
                    （{{ item.day }}后到期）
                  </div>
                  <div v-if="item.state == 2 && activeindex == 4">
                    （已到期）
                  </div>
                </div>
                <!--                                <div v-if="item.state == 1" @click="getpayState(item.row.id)" class="yzpay-box">-->
                <!--                                    <el-button icon="el-icon-refresh" size="mini">刷新状态</el-button>-->
                <!--                                </div>-->
              </div>
              <div class="table_bodyI_t">
                <el-button
                  type="text"
                  class="com-btn-txt"
                  size="mini"
                  @click="downLoad(item.bd_url)"
                  v-if="item.bd_url && item.state == 2"
                  >电子保单
                </el-button>
                <el-button
                  type="text"
                  class="com-btn-txt"
                  size="mini"
                  @click="getBdUrl(item.id)"
                  v-if="!item.bd_url && item.state == 2 && item.type == 2"
                  >获取电子保单
                </el-button>
                <el-button
                  v-if="item.state == 2"
                  type="text"
                  class="com-btn-txt"
                  size="mini"
                  @click="toChange(item.id)"
                  >批改
                </el-button>
                <el-button
                  type="text"
                  class="com-btn-txt"
                  size="mini"
                  v-if="item.fp_url && item.state == 2"
                  @click="downLoad(item.fp_url)"
                  >电子发票
                </el-button>
                <el-button
                  type="text"
                  class="com-btn-txt"
                  size="mini"
                  v-if="!item.fp_url && item.state == 2"
                  @click="getInvoice(item)"
                  >获取电子发票
                </el-button>
                <el-button
                  v-if="item.state == 2"
                  type="text"
                  class="com-btn-txt"
                  size="mini"
                  @click="see(item.id)"
                  >查看
                </el-button>
                <el-button
                  v-if="activeindex == 3"
                  type="text"
                  class="com-btn-txt"
                  size="mini"
                  @click="nextBao(item.bx_id, item.id)"
                  >续保
                </el-button>
                <el-button
                  v-if="item.state == 1"
                  type="text"
                  class="com-btn-txt"
                  size="mini"
                  @click="pay(item.id)"
                  >去完成
                </el-button>
                <el-button
                  v-if="item.state == 1"
                  type="text"
                  class="com-btn-txt"
                  size="mini"
                  @click="del(item.id)"
                  >删除
                </el-button>
              </div>
            </div>
          </div>
          <div class="zanwu" v-if="list.data.length == 0">暂无数据</div>
        </div>
      </div>
      <div class="page-box">
        <el-pagination
          background
          small
          :current-page="list.current_page"
          :page-size="list.per_page"
          layout="total, prev, pager, next, jumper"
          :total="list.total"
          @current-change="changePage"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabarr: [
        {
          name: "投保成功",
          type: 1,
        },
        {
          name: "待完成订单",
          type: 2,
        },
        {
          name: "待续投保",
          type: 3,
        },
        {
          name: "到期保单",
          type: 4,
        },
      ],
      activeindex: 1, //state
      activeName: 0,
      order_no: "",
      qiye_name: "",
      key_words: "",
      list: {
        current_page: 1,
        data: [],
      },
      loading: false,
    };
  },
  mounted() {
    if (this.$route.params.type) {
      this.activeindex = this.$route.params.type.toString();
    }
    this.getDate();
    this.orderviewOrder();
  },
  methods: {
    //下载电子发票 保单
    downLoad(url) {
      if (url) {
        window.open(url);
      }
    },
    //电子发票
    getInvoice(item) {
      this.loading = true;
      if (item.type == 1) {
        this.ajaxs("order/getInvoice", {
          data: {
            id: item.id,
          },
          success: (res) => {
            this.toast(res.code, res.msg);
            if (res.code) {
              this.getDate();
            }
          },
        });
      } else {
        this.ajaxs("paorder/getInvoice", {
          data: {
            id: item.id,
          },
          success: (res) => {
            this.toast(res.code, res.msg);
            if (res.code) {
              this.getDate();
            }
          },
        });
      }
    },
    //电子保单
    getBdUrl(id) {
      this.loading = true;
      this.ajaxs("paorder/getBd", {
        data: {
          id: id,
        },
        success: (res) => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.getDate();
          }
        },
      });
    },
    orderviewOrder() {
      this.ajaxs("order/viewOrder", {
        data: {},
        success: (res) => {
          if (res.code == 1) {
            this.getDate();
          }
        },
      });
    },
    getpayState(id) {
      this.ajaxs("order/getpayState", {
        data: {
          id: id,
        },
        success: (res) => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.getDate();
          }
        },
      });
    },
    nextBao(id, order_id) {
      this.$router.push({
        path: "/index/index/form/" + id,
        query: {
          order_id: order_id,
          is_add: true,
        },
      });
    },
    pay(id) {
      this.$router.push({
        path: "/index/index/confirm/" + id,
      });
    },
    see(id) {
      this.$router.push({
        path: "/index/order/detail/" + id,
      });
    },
    toChange(id) {
      this.$router.push({
        path: "/index/order/detail/" + id + "?type=2",
      });
    },
    handleClick() {
      this.changePage(1);
    },
    changePage(e) {
      console.log(e);
      this.list.current_page = e;
      this.getDate();
    },
    getDate() {
      this.loading = true;
      this.ajaxs("order/index", {
        data: {
          bd_no: this.order_no,
          name: this.qiye_name,
          state: this.activeindex,
          page: this.list.current_page,
          key_words: this.key_words,
        },
        success: (res) => {
          this.list = res.msg;
          this.loading = false;
        },
      });
    },
    del(id) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.ajaxs("order/orderDel", {
            data: { id: id },
            success: (res) => {
              this.toast(res.code, res.msg);
              if (res.code) {
                this.getDate();
              }
            },
          });
        })
        .catch(() => {});
    },
    itemclick(index, type) {
      this.activeindex = type;
      this.activeName = index;
      this.list.current_page = 1;
      this.loading = true;
      this.ajaxs("order/index", {
        data: {
          bd_no: this.order_no,
          name: this.qiye_name,
          state: this.activeindex,
          page: this.list.current_page,
          key_words: this.key_words,
        },
        success: (res) => {
          this.list = res.msg;
          this.loading = false;
        },
      });
    },
    copyBD(val) {
      /* 复制内容到文本域 */
      navigator.clipboard.writeText(val);
      /* 弹出已复制的内容 */
      this.$message({
        showClose: true,
        message: "复制成功",
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/order/list.css";

.yzpay-box {
  color: red;
  cursor: pointer;
}
</style>
